<!--
 * @Descripttion: app设置
 * @Author: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: DXV-RGWU-TUFH-RFCY-IEGMYY
 * @LastEditTime: 2023-08-14 10:33:39
-->
<template>
  <div class="lb-system-wechat">
    <top-nav></top-nav>
    <div class="page-main">
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="subForm"
        label-width="180px"
      >
        <el-form-item
          :label="$t('action.attendantName') + '提成计算方式'"
          prop="is_current"
        >
          <el-radio-group v-model="subForm.is_current">
            <div class="pt-md pb-md">
              <el-radio :label="1"
                >周期结束后，等级和维度数据清零
                <lb-tool-tips :padding="0"
                  >{{
                    $t('action.attendantName')
                  }}在设置的周期时间内可逐步升级，升级后的每一笔订单按照等级后的等级提成计算
                  <div class="mt-sm">
                    周期结束后，{{
                      $t('action.attendantName')
                    }}在上一周期内累积的所有业绩，服务时长、在线时长、最低业绩、加钟率、积分以及达到的等级全部清零
                  </div></lb-tool-tips
                ></el-radio
              >
            </div>
            <el-radio :label="2"
              >周期结束后，只清零维度数据，等级按照上期核算最高等级计算
              <lb-tool-tips :padding="0"
                >{{
                  $t('action.attendantName')
                }}在本周期（T周期）累积的所有业绩，服务时长、在线时长、最低业绩、加钟率、积分，
                <div class="mt-sm mb-sm">
                  在周期结束时将5个维度数据清零，同时核算{{
                    $t('action.attendantName')
                  }}的5个维度数据满足哪个等级，以最高等级记录，
                </div>
                再下一周期（T+1）按照该等级提成比例计算每一笔订单</lb-tool-tips
              >
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <block v-if="routesItem.auth.recommend">
          <el-form-item
            :label="'推荐' + $t('action.attendantName') + '样式'"
            prop="recommend_style"
          >
            <el-radio-group v-model="subForm.recommend_style">
              <el-radio :label="1">样式一</el-radio>
              <el-radio :label="2">样式二</el-radio>
            </el-radio-group>

            <el-button
              @click="toShowDialog('recommend')"
              type="primary"
              size="mini"
              plain
              style="margin-left: 20px"
              >查看示例</el-button
            >
          </el-form-item>
          <el-form-item
            :label="'推荐' + $t('action.attendantName') + '方式'"
            prop="auto_recommend"
          >
            <el-radio-group v-model="subForm.auto_recommend">
              <el-radio :label="1">自动推荐</el-radio>
              <el-radio :label="0">手动推荐</el-radio>
            </el-radio-group>
          </el-form-item>
        </block>
        <el-form-item
          :label="$t('action.attendantName') + '列表页筛选样式'"
          prop="coach_format"
        >
          <el-radio-group v-model="subForm.coach_format">
            <el-radio :label="1">样式一</el-radio>
            <el-radio :label="2">样式二</el-radio>
          </el-radio-group>

          <el-button
            @click="toShowDialog('format')"
            type="primary"
            size="mini"
            plain
            class="show-btn"
            style="margin-left: 20px"
            >查看示例</el-button
          >
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '列表页列表样式'"
          prop="coach_format"
        >
          <el-radio-group v-model="subForm.coach_list_format">
            <el-radio :label="1">样式一</el-radio>
            <el-radio :label="2">样式二</el-radio>
          </el-radio-group>

          <el-button
            @click="toShowDialog('list')"
            type="primary"
            size="mini"
            plain
            class="show-btn"
            style="margin-left: 20px"
            >查看示例</el-button
          >
        </el-form-item>
        <el-form-item
          :label="'显示' + $t('action.attendantName') + '提成比例'"
          prop="coach_level_show"
        >
          <el-radio-group v-model="subForm.coach_level_show">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启之后，{{ $t('action.attendantName') }}端等级管理页面显示{{
              $t('action.attendantName')
            }}的提成比例，关闭则不显示</lb-tool-tips
          >
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '入驻'"
          prop="coach_apply_show"
        >
          <el-radio-group v-model="subForm.coach_apply_show">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启之后，将在移动端首页服务分类列表展示{{
              $t('action.attendantName')
            }}入驻，若服务分类数量大于4，则展示在第5个，否则将展示在服务分类末尾</lb-tool-tips
          >
        </el-form-item>
        <el-form-item label="详情页资格证书展示" prop="coach_license_show">
          <el-radio-group v-model="subForm.coach_license_show">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启之后，将在移动端{{
              $t('action.attendantName')
            }}详情页面展示资格证书</lb-tool-tips
          >
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '强制自动定位'"
          prop="coach_force_show"
        >
          <el-radio-group v-model="subForm.coach_force_show">
            <el-radio :label="1">{{ $t('action.ON') }}</el-radio>
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
          </el-radio-group>
          <lb-tool-tips
            >开启强制自动定位之后，{{
              $t('action.attendantName')
            }}在手机端不可关闭实时定位功能，同时手动位置更新功能不可使用</lb-tool-tips
          >
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '服务迟到提醒'"
          prop="service_lat_minute"
        >
          <el-radio-group
            style="margin-top: 12px"
            @change="changeLatType"
            v-model="subForm.service_lat_type"
          >
            <el-radio :label="0">服务开始前</el-radio>
            <el-radio :label="1">服务开始后</el-radio>
            <div class="mt-md f-paragraph">
              <el-input
                class="mini"
                v-model="subForm.service_lat_minute"
                placeholder="请输入分钟数"
              ></el-input>
              分钟，{{
                $t('action.attendantName')
              }}未点到达目的地，提醒平台和关联代理商
            </div>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '未接单提醒'"
          prop="coach_receiving_minute"
        >
          用户下单后，{{ $t('action.attendantName') }}超过
          <el-input
            class="mini"
            v-model="subForm.coach_receiving_minute"
            placeholder="请输入分钟数"
          ></el-input>
          分钟未接单，提醒平台和关联代理商
        </el-form-item>
        <el-form-item
          :label="$t('action.attendantName') + '跳单提醒'"
          prop="jump_order_minute"
        >
          {{ $t('action.attendantName') }}完成订单后
          <el-input
            class="mini"
            v-model="subForm.jump_order_minute"
            placeholder="请输入分钟数"
          ></el-input>
          分钟未离开订单目的地
          <el-input
            class="mini"
            v-model="subForm.jump_order_distance"
            placeholder="请输入公里数"
          ></el-input>
          公里，提醒平台和关联代理商
        </el-form-item>
        <el-form-item>
          <lb-button type="primary" @click="submitFormInfo" v-preventReClick>{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>

    <el-dialog
      title="查看示例"
      :visible.sync="showDialog"
      :append-to-body="true"
      width="700px"
      center
      top="5vh"
    >
      <div class="flex-center c-warning">
        图片上面的{{
          $t('action.attendantName')
        }}字样仅作演示效果，如更改过行业服务人员名称，则实际页面将显示修改后的名称
      </div>
      <div class="flex-between">
        <div v-for="(item, index) in list[dialogType]" :key="index">
          <div class="flex-center pd-lg f-paragraph c-title">
            {{ item.title }}
          </div>
          <img class="look-image" :src="item.img" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    let checkJumpOrder = (rule, value, callback) => {
      let { jump_order_minute: minute, jump_order_distance: distance } = this.subForm
      if (!minute || !/^\+?[0-9]*$/.test(minute)) {
        callback(new Error(!minute ? `请输入分钟数` : `请输入正确的分钟数，不支持小数`))
      } else if (!distance || !/^(([1-9][0-9]*)|(([0]\.\d{1}|[1-9][0-9]*\.\d{1})))$/.test(distance)) {
        callback(new Error(!distance ? `请输入公里数` : distance * 1 === 0 ? `请输入大于0的公里数` : `请输入正确的公里数，最多保留1位小数`))
      } else {
        callback()
      }
    }
    return {
      list: {
        recommend: [{ title: '样式一', img: 'https://lbqny.migugu.com/admin/anmo/technician/recommend_1_1.jpeg' }, { title: '样式二', img: 'https://lbqny.migugu.com/admin/anmo/technician/recommend_2_1.jpeg' }],
        format: [{ title: '样式一', img: 'https://lbqny.migugu.com/admin/anmo/technician/list2_1.jpeg' }, { title: '样式二', img: 'https://lbqny.migugu.com/admin/anmo/technician/list2_2.jpeg' }],
        list: [{ title: '样式一', img: 'https://lbqny.migugu.com/admin/anmo/technician/list2_1.jpeg' }, { title: '样式二', img: 'https://lbqny.migugu.com/admin/anmo/technician/list2_2.jpeg' }]
      },
      showDialog: false,
      dialogType: '',
      subForm: {
        is_current: 1,
        recommend_style: 1,
        auto_recommend: 0,
        coach_level_show: 1,
        coach_format: 1,
        coach_list_format: 1,
        coach_apply_show: 0,
        coach_license_show: 0,
        coach_force_show: 0,
        service_lat_type: 0,
        service_lat_minute: '',
        coach_receiving_minute: '',
        jump_order_minute: '',
        jump_order_distance: ''
      },
      subFormRules: {
        service_lat_minute: { required: true, type: 'number', validator: this.$reg.isNum, text: '分钟数', trigger: 'blur' },
        coach_receiving_minute: { required: true, type: 'number', validator: this.$reg.isNum, text: '分钟数', trigger: 'blur' },
        jump_order_minute: { required: true, validator: checkJumpOrder, trigger: 'blur' }
      }
    }
  },
  created () {
    this.getFormInfo()
  },
  computed: {
    ...mapState({
      routesItem: state => state.routes
    })
  },
  methods: {
    async getFormInfo () {
      let { code, data } = await this.$api.system.configInfo()
      if (code !== 200) return
      for (let i in this.subForm) {
        this.subForm[i] = data[i]
      }
    },
    toShowDialog (type) {
      this.dialogType = type
      this.showDialog = true
    },
    changeLatType () {
      this.subForm.service_lat_minute = ''
    },
    async submitFormInfo () {
      let flag = false
      this.$refs['subForm'].validate(valid => {
        if (valid) {
          flag = true
        }
      })
      let subForm = JSON.parse(JSON.stringify(this.subForm))
      if (flag) {
        await this.$api.system.configUpdate(subForm)
        this.$message.success(this.$t('tips.successSub'))
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-system-wechat {
  width: 100%;
  .el-form {
    .el-input {
      width: 300px;
    }
    .el-input.mini {
      width: 120px;
    }
  }
}
.look-image {
  width: 297px;
  height: 660px;
  border-radius: 10px;
  border: 1px solid #eee;
}
</style>
